<template>
  <div>
    <el-date-picker
      v-model='month'
      type='month'
      :picker-options='pickerOptions'
      @change='handleMonthChange'>
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: null,
      pickerOptions: {
        disabledDate: (time) => {
          const currentMonth = new Date().getMonth() + 1
          const selectedMonth = time.getMonth() + 1
          return currentMonth !== selectedMonth
        },
        cellClassName: (data) => {
          const currentMonth = new Date().getMonth() + 1
          const selectedMonth = data.date.getMonth() + 1
          return selectedMonth === currentMonth ? 'is-today' : ''
        }
      }
    }
  },
  methods: {
    handleMonthChange(val) {
      console.log('选择的月份：', val)
    }
  }
}
</script>

<style scoped>
.is-today {
  background-color: #f5f5f5;
}
</style>
